import React, { useEffect, useState } from "react";
import { dataObj } from "./old";

import { Button } from "antd";
const addAction = {
  type: "add",
  payload: null,
};
const changeAction = {
  type: "change",
  payload: 12,
};
const Child1 = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    dataObj.subscribe(() => {
      let curData = dataObj.getData();
      setCount(curData.count);
    });
  }, []);
  return (
    <div>
      <h5>child1 中的count{count}</h5>
    </div>
  );
};
const Child2 = () => {
  return (
    <div>
      <Button
        onClick={() => {
          dataObj.changeDataByAction(addAction);
        }}
      >
        add
      </Button>{" "}
      <Button
        onClick={() => {
          dataObj.changeDataByAction(changeAction);
        }}
      >
        changeData
      </Button>
    </div>
  );
};
export default function ReduxPage() {
  return (
    <div>
      <h1>Redux</h1>
      <Child1 />
      <Child2 />
    </div>
  );
}
